import { createApp, h, getCurrentInstance, nextTick, ComponentInternalInstance } from 'vue'
import Spin from './spin.vue'


const tIndex = 500

Spin.newInstance = properties => {
    
    const _props = properties || {}

    let _instance:ComponentInternalInstance | null =null

    const Instance = createApp({
        data () {
            return Object.assign({}, _props, {

            })
        },
        render() {
            const vnode: VNode | null  = h(Spin, {
                size: 'large',
                fix: true,
                fullscreen: true,
                ref: 'spin'
            })
            // vnode.appContext=
            return h('div', {
                'class': 'spin-fullscreen spin-fullscreen-wrapper',
                'style': {
                    'z-index': 2010 + tIndex
                }
            }, [vnode])
        },
        created () {
            _instance = getCurrentInstance()
        }
    })

    const container = document.createElement('div')
    document.body.appendChild(container)
    Instance.mount(container)
    const spin = (_instance as any).refs.spin
    return {
        show () {
            nextTick(()=> {
                (_instance as any).refs.spin.visible = true
            })
        },
        remove (cb) {
            spin.visible = false
            setTimeout(function() {
                Instance.unmount()
                document.body.removeChild(container)
                cb()
            }, 500)
        },
        component: spin
    }
}

export default Spin
